<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 150px; width: 100%" class=""></div>
		<!-- Notifications -->
		<div class="notifications f f-a-c f-j-b">
			<div class="leftNotifications">Notifications setting</div>
		</div>
		<!-- body -->
		<div class="settingBody">
			<div class="switch">
				<div class="switchTop f f-a-c"><span>Account activity</span><el-switch v-model="value" style="--el-switch-on-color: #000; --el-switch-off-color: #dcdfe6" size="small" /></div>
				<div class="count">For important updates regarding your activity, certain notifications cannot be disabled.</div>
			</div>
			<div class="xian"></div>
			<div class="email f f-a-c">
				<div class="lef hand f f-a-c">
					<div class="img">
						<img @click="smsXun(1)" src="/src/assets/user/weigou.png" v-if="!email || !obj.hasVerifyEmail" class="gouImg" alt="" />
						<img @click="email = false" src="/src/assets/user/gou.png" v-else class="gouImg" alt="" />
					</div>
					<div class="text">Email</div>
				</div>
				<div class="lef hand f f-a-c">
					<div class="img">
						<img @click="smsXun(2)" src="/src/assets/user/weigou.png" v-if="!sms || !obj.hasVerifyMobile" class="gouImg" alt="" />
						<img @click="sms = false" src="/src/assets/user/gou.png" v-else class="gouImg" alt="" />
					</div>
					<div class="text">SMS</div>
				</div>
			</div>
			<div class="when">Send me notifications when:</div>
			<div class="setle">
				<div>
					<el-checkbox v-model="checked1" label="I receive new order message" size="large" />
				</div>
				<div>
					<el-checkbox v-model="checked2" label="I receive new systematic message" size="large" />
				</div>
				<div>
					<el-checkbox v-model="checked3" label="I receive new collect message" size="large" />
				</div>
				<!-- <div>
					<el-checkbox v-model="checked4" label="I receive new review" size="large" />
				</div> -->
			</div>
			<div class="verif f f-a-c"><div @click="saveBao" class="hand btn">Save</div></div>
		</div>
		<el-dialog v-model="dialogTableVisible" @close="close" title="" width="540">
			<div class="verify">Verify</div>
			<div class="inps">
				<div class="inpname">{{ nums == 1 ? "Email" : "Phone number" }}</div>
				<input type="text" class="input" v-model="phonValue" name="" id="" />
			</div>
			<div style="margin-top: -10px" class="verif f f-a-c"><div @click="verify" class="hand Send">Send</div></div>
			<div class="inps">
				<div class="inpname">verification code</div>
				<input type="text" class="input" v-model="codeValue" name="" id="" />
			</div>
			<div class="verif f f-a-c"><div @click="veryYan" class="hand btn">Verify</div></div>
		</el-dialog>
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ref, onMounted } from "vue";
	import {
		SellerUserDetails,
		BuyUserinfo,
		GetSiteInformationConfiguration,
		VerifyMobileEmlsificationCode,
		VerifyMobilePhoneVerificationCode,
		SendEmaiSMS,
		SendEmailVerificationCode,
		SaveSiteInformation
	} from "@/api/xpert.js";
	import {
		DisplaySellerInformation,
		BuyUserinfos,
		GetSiteInformationConfigurations,
		VerifyMobileEmlsificationCodes,
		VerifyMobilePhoneVerificationCodes,
		SendEmaiSMSs,
		SendEmailVerificationCodes,
		SaveSiteInformations
	} from "@/api/knowClub/index.js";
	import { refrestTokenXP, refrestTokenKC } from "@/utils/setting.js";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import { ElMessage } from "element-plus";
	import router from "@/router/index.js";
	import { useRoute } from "vue-router";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	let statusTab = ref(1);
	let inds = localStorage.getItem("ind");
	let phonValue = ref("");
	let codeValue = ref("");
	let checked1 = ref(false);
	let checked2 = ref(false);
	let dialogTableVisible = ref(false);
	let checked3 = ref(false);
	let checked4 = ref(false);
	let oneEm = ref(false);
	let sms = ref(false);
	let route = useRoute();
	let num = route.query.num;
	let email = ref(false);
	let obj = ref({});
	let ind = ref(1);
	let emList = ref([]);
	let gurationObj = ref({});
	let nums = ref(0);
	let value = ref(false);
	onMounted(async () => {
		if (num == 2) {
			// 代表是kc
			await getSiteInformationConfiguration();
			await getUserInfo();
		} else {
			await getSiteInformationConfiguration();
			await getUserInfo();
		}
		window.addEventListener("scroll", handleScroll);
	});
	// 更新站内信息
	const saveBao = async () => {
		let arr = [];
		if (checked1.value) {
			arr.push(1);
		}
		if (checked2.value) {
			arr.push(2);
		}
		if (checked3.value) {
			arr.push(3);
		}
		// 邮箱
		let emiList = [];
		if (email.value) {
			emiList.push(1);
		}
		if (sms.value) {
			emiList.push(2);
		}
		let n = null;
		if (num == 2) {
			// 代表kc
			n = await SaveSiteInformations({ knowclubStatus: value.value, knowclubSendType: arr, knowclubNotifyType: emiList });
		} else {
			n = await SaveSiteInformation({ xpertStatus: value.value, xpertSendType: arr, xpertNotifyType: emiList });
		}
		if (n.code == 200) {
			ElMessage.success(n.msg);
			getSiteInformationConfiguration();
			getUserInfo();
			// 刷新token
			if (num == 2) {
				await refrestTokenKC();
			} else {
				await refrestTokenXP();
			}
		}
	};
	// 获取站内信息配置
	const getSiteInformationConfiguration = async () => {
		let n = null;
		if (num == 2) {
			n = await GetSiteInformationConfigurations();
			gurationObj.value = n.data;
			if (n.data) {
				value.value = n.data.knowclubStatus;
				n.data.knowclubSendType.forEach(item => {
					if (item == 1) {
						checked1.value = true;
					} else if (item == 2) {
						checked2.value = true;
					} else if (item == 3) {
						checked3.value = true;
					}
				});
				emList.value = n.data.knowclubNotifyType;
				// 回显配置
				if (n.data.knowclubNotifyType.indexOf(1) != -1) {
					email.value = true;
				}
				if (n.data.knowclubNotifyType.indexOf(2) != -1) {
					console.log(n.data.knowclubNotifyType, "565656565655");
					sms.value = true;
				}
			}
		} else {
			n = await GetSiteInformationConfiguration();
			gurationObj.value = n.data;
			if (n.data) {
				value.value = n.data.xpertStatus;
				n.data.xpertSendType.forEach(item => {
					if (item == 1) {
						checked1.value = true;
					} else if (item == 2) {
						checked2.value = true;
					} else if (item == 3) {
						checked3.value = true;
					}
				});
				emList.value = n.data.xpertNotifyType;
				// 回显配置
				if (n.data.xpertNotifyType.indexOf(1) != -1) {
					email.value = true;
				}
				if (n.data.xpertNotifyType.indexOf(2) != -1) {
					console.log(n.data.xpertNotifyType, "565656565655");
					sms.value = true;
				}
			}
		}
	};
	// 验证验证码
	const veryYan = async () => {
		if (nums.value == 1) {
			// 验证邮箱验证码
			let n = null;
			if (num == 2) {
				n = await VerifyMobileEmlsificationCodes({
					code: codeValue.value
				});
			} else {
				n = await VerifyMobileEmlsificationCode({
					code: codeValue.value
				});
			}
			if (n.code == 200) {
				ElMessage.success(n.msg);
				getSiteInformationConfiguration();
				getUserInfo();
				dialogTableVisible.value = false;
			}
		} else {
			// 验证手机验证码
			let n = null;
			if (num == 2) {
				n = await VerifyMobilePhoneVerificationCodes({
					code: codeValue.value
				});
			} else {
				n = await VerifyMobilePhoneVerificationCode({
					code: codeValue.value
				});
			}
			if (n.code == 200) {
				ElMessage.success(n.msg);
				getSiteInformationConfiguration();
				getUserInfo();
				dialogTableVisible.value = false;
			}
		}
	};
	// 发送验证码
	const verify = async () => {
		if (nums.value == 1) {
			// 邮箱
			let n = null;
			if (num == 2) {
				n = await SendEmailVerificationCodes();
			} else {
				n = await SendEmailVerificationCode();
			}
			if (n.code == 200) {
				ElMessage.success("Verification code sent");
			}
		} else {
			// 手机验证
			let n = null;
			if (num == 2) {
				n = await SendEmaiSMSs();
			} else {
				n = await SendEmaiSMS();
			}
			if (n.code == 200) {
				ElMessage.success("Verification code sent");
			}
		}
	};
	// 获取个人信息
	const getUserInfo = async () => {
		let n = null;
		if (inds == 2) {
			// 表示卖家
			n = await SellerUserDetails();
		} else if (inds == 3) {
			// 表示买家
			n = await BuyUserinfo();
		} else if (inds == 5) {
			// 表示卖家
			n = await DisplaySellerInformation({ userId: JSON.parse(localStorage.getItem("logininfo")).userIdKc });
		} else if (inds == 6) {
			// 表示买家
			n = await BuyUserinfos();
		}
		obj.value = n.data;
	};
	const smsXun = num => {
		nums.value = num;
		if (num == 1 && !obj.value.hasVerifyEmail) {
			// 表示使用邮箱未验证
			phonValue.value = obj.value.email;
			// if (emList.value.indexOf(num) == -1) {
			dialogTableVisible.value = true;
			// }
		} else if (num == 2 && !obj.value.hasVerifyMobile) {
			// 表示手机号未验证
			phonValue.value = obj.value.mobile;
			// if (emList.value.indexOf(num) == -1) {
			dialogTableVisible.value = true;
			// }
		} else if (num == 1 && obj.value.hasVerifyEmail) {
			// 表示邮箱已验证
			email.value = true;
		} else if (num == 2 && obj.value.hasVerifyMobile) {
			// 表示手机号已验证
			sms.value = true;
		}
	};
	// // 关闭弹出层的时候触发的
	// const close = () => {
	// 	if (!codeValue.value.length || !phonValue.value.length) {
	// 		sms.value = false;
	// 	}
	// };
	// 切换分页
	const sizeChange = e => {
		console.log(e, "1111111");
	};
	// 切换分页
	const currentChange = e => {
		console.log(e, "1111111");
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
